<route>
    {
        meta: {
            layout: 'index',
            title:'井信息管理'
        }
    }  
</route>
<template>
    <a-row>
        <a-col :span="6">
            <WellTree></WellTree>
        </a-col>
        <a-col :span="18">


            <a-table :dataSource="dataSource" :columns="columns">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'name'">
                        <a>
                            {{ record.name }}
                        </a>
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <span>
                            <a-button type="primary" shape="round" :size="size">
                                <template #icon>
                                    <line-chart-outlined />
                                </template>
                                控制台
                            </a-button>
                        </span>
                    </template>
                </template>
            </a-table>



            <!-- 新版添加或修改部门对话框 -->
            <AntdConfirmModal :title="isCreate ? '新建井' : '修改井'" ref="modalRef" width="600px" :keepSlot="false"
                @confirm="submitForm">
                <a-form :model="form" name="basic" :label-col="{ span: 8 }">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="井名称" name="wellName" :rules="[{ required: true, message: '请输入井名称' }]">
                                <a-input v-model:value="form.wellName" placeholder="请输入井名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="井ID" name="wellId" :rules="[{ required: true, message: '请输入井ID' }]">
                                <a-input v-model:value="form.wellId" placeholder="请输入井ID" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="经度" name="longitude">
                                <a-input v-model:value="form.longitude" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="纬度" name="latitude">
                                <a-input v-model:value="form.latitude" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="国家" name="nation">
                                <a-input v-model:value="form.nation" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="城市" name="city">
                                <a-input v-model:value="form.city" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="省份" name="province">
                                <a-input v-model:value="form.province" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="区/县" name="county">
                                <a-input v-model:value="form.county" controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </AntdConfirmModal>

            <!-- 新增 -->
            <AntdConfirmModal :title="isMap ? '新建井' : '修改井'" ref="modalRefMap" width="600px" :keepSlot="false"
                @confirm="submitForm">

                <a-form :model="formMap">
                    <GdMap :longitude="formMap.longitude" :latitude="formMap.latitude" @setAddress="setAddress"
                        @setLnglat="setLnglat"></GdMap>
                    <!-- <el-link></el-link> -->
                    <a-row style="margin-top:15px">
                        <a-col :span="24">
                            <a-form-item label="纬度">
                                <a-input-number v-model:value="formMap.latitude" controls-position="right" :step="0.0001"
                                    style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="经度">
                                <a-input-number v-model:value="formMap.longitude" controls-position="right" :step="0.0001"
                                    style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row gutter="15">
                        <a-col :span="12">
                            <a-form-item label="井号">
                                <a-input v-model:value="formMap.uwi" style="width:100%" placeholder="请输入井号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="井名">
                                <a-input v-model:value="formMap.name" style="width:100%" placeholder="请输入井名" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row gutter="15">
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="formMap.province" placeholder="省" style="width:100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="formMap.city" placeholder="市" style="width:100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="formMap.district" placeholder="区" style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <!-- <a-row><a-button type="primary" style="width:100%">提交</a-button></a-row> -->
                </a-form>
            </AntdConfirmModal>
        </a-col>
    </a-row>
</template>
<script setup>
import {columns} from './index'
import WellTree from './components/WellTree.vue'
import { queryList, deleteOne, updateOne } from "@/custom/well/api/well"
import { LineChartOutlined } from "@ant-design/icons-vue"
import useApp from "@/hooks";
import { cloneDeep } from 'lodash-es';
import GdMap from '../structure/components/map.vue'
const { $, proxy } = useApp();
const isCreate = ref(true);
const modalRef = ref(null);
const open = ref(false);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
const loading = ref(true);

const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const isMap = ref(false);
const modalRefMap = ref(null);
const formMap = reactive({
    operator: '',
    field: '',
    location: '',
    province: '',
    state: '',
    country: '',
    district: '',
    latitude: 44,
    longitude: 124,
    uwi: '',
    name: '',
    h2s: false,
    co2: false
})
function setAddress(e) {
    formMap.country = e.country
    formMap.province = e.province
    formMap.city = e.city
    formMap.district = e.district
}
function setLnglat(e) {
    console.log(e)
    formMap.latitude = e.lat
    formMap.longitude = e.lng
}
/** 新增 */
function addItem() {
    isMap.value = true;
    modalRefMap.value.openModal()
}

/** 提交按钮 */
function submitForm() {
    console.log("提交按钮")
    console.log(form.value.id)
    console.log(form.value)
    if (form.value.id != undefined) {
        updateOne(form.value).then((response) => {
            $.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
            modalRef.value.closeModal()
        });
    } else {
        // createOne(form.value).then((response) => {
        //     $.$modal.msgSuccess("新增成功");
        //     open.value = false;
        //     getList();
        //     modalRef.value.closeModal()
        // });
    }
}
/** 修改按钮 */
async function handleUpdate(record) {
    form.value = cloneDeep(record);
    isCreate.value = false;
    modalRef.value.openModal()
}

/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    console.log("执行搜索")
    getList();
}

/** 表单重置 */
function reset() {
    console.log('执行重置')
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}
/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
    });
}
getList();

/** 删除井 */
function handleDelete(record) {
    deleteOne(record.id).then(() => {
        getList();
    });;
}

</script>
  